<template>
    <div class="leaderboard">
        <h1>排行榜</h1>
        <div class="board">
            <div class="header">
                <span>排名</span>
                <span>用户名</span>
                <span>最高分</span>
            </div>
            <div v-for="(user, index) in users" :key="user.username" class="row">
                <span>{{ index + 1 }}</span>
                <span>{{ user.username }}</span>
                <span>{{ user.highest_score }}</span>
            </div>
        </div>
        <button @click="goBack">返回主页</button>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getLeaderboard } from '../api'

export default {
    name: 'Leaderboard',
    setup() {
        const router = useRouter()
        const users = ref([])

        const loadLeaderboard = async () => {
            try {
                const { data } = await getLeaderboard()
                users.value = data.users
            } catch (error) {
                console.error('获取排行榜失败:', error)
            }
        }

        const goBack = () => {
            router.push('/')
        }

        onMounted(loadLeaderboard)

        return {
            users,
            goBack
        }
    }
}
</script>

<style scoped>
.leaderboard {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

h1 {
    color: #776e65;
    margin-bottom: 30px;
}

.board {
    background: #bbada0;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 20px;
}

.header {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    padding: 10px;
    background: #8f7a66;
    color: white;
    font-weight: bold;
    border-radius: 3px;
}

.row {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    padding: 10px;
    background: white;
    margin: 5px 0;
    border-radius: 3px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #8f7a66;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

button:hover {
    background-color: #776e65;
}
</style> 